<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./js/jquery-2.1.1.min.js"></script>
        <style>
            li{
                width:500px;
                line-height: 30px;
            }

            li .content{
                float:left;
                width:200px;
                padding-left: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            li .edit{
                margin-left: 20px;
                display:none;
            }

            li .del{
                width:20px;
                display: none;
                float:left;
                cursor: pointer;
            }
            
            li:hover{
                background:#ccc;
            }

            li:hover .del{
                display: block;
            }

            li:hover .content{
                padding-left:0;
            }

            li:hover .edit{
                margin-left:0;
            }

            li .time{
                float:right;
            }
        </style>
    </head>
    <body>
        <ul style="list-style:disc" id="list">

        </ul>

        <input type="text" placeholder="输入添加的事项" id="addValue" />
        <br />
        <input type="button" value="添加" id="addList" />
    </body>
    <script>

        var origin = window.location.origin;

        $('#addList').click(()=>{
            var $val = $('#addValue');
            var value = $val.val().trim();
            if(!value){
                $val.val('');
                return;
            }
            $.ajax({
                url: origin + '/addList',
                type:'post',
                data:{
                    content : value
                },
                success:(res)=>{
                    res.ops.forEach((value,index)=>{
                        $('#list').append('<li data-id="'+ value._id +'"><span class="del">×</span><span class="content">'+ value.content +'</span><input class="edit" /><span class="time">'+ (value.updateTime || '') +'</span></li>');
                    });
                    $val.val('');
                },
                error:(err)=>{
                    console.log(err);
                }
            });
        });
        $.ajax({
            url : origin +'/getList',
            type: 'post',
            success :(res)=>{
                res.forEach((value,index)=>{
                    $('#list').append('<li data-id="'+ value._id +'"><span class="del">×</span><span class="content">' + value.content + '</span><input class="edit" /><span class="time">'+ (value.updateTime || '') +'</span></li>');
                });
            },
            error:(err)=>{
                console.log(err);
            }
        });

        $('ul').click((ev)=>{
            var target = ev.target;
            var $target = $(target);
            if(target.className === 'del'){
                var $li = $(target.parentNode);
                var id = $li.attr('data-id');
                $.ajax({
                    url : origin + '/deleteList',
                    type: 'post',
                    data : {
                        _id : id
                    },
                    success : (res)=>{
                        if(res.ok){
                            $li.remove();
                        }
                    },
                    error : (res)=>{
                        console.log(res);
                    }
                });
            }
            if(target.className === 'content'){
                $target.hide();
                $(target.nextElementSibling).show().val($target.html());

            }
        });

        $('ul').on('blur','.edit',function(){
            var $pre = $(this.previousElementSibling)
            $pre.show();
            var $this = $(this);
            $this.hide();
            var newVal = $this.val().trim();
            if(newVal === $pre.html()){
                return;
            }

            var id = $this.parents('li').attr('data-id');

            $.ajax({
                url : origin + '/updateList.js',
                type : 'post',
                data :{
                    _id : id,
                    content : newVal
                },
                success : (res)=>{
                    res.forEach((value,index)=>{
                        $pre.html(value.content);
                        $pre.parent('li').find('.time').html(value.updateTime);
                    });
                    
                },
                error : (res)=>{
                    console.log(res);
                }
            });
        })
    </script>
</html>